<template>
    <div>
        <el-button size="small" type="primary" @click="addHandler">添加</el-button>
        <!-- 表格 -->
        <el-table :data="roles" style="width: 100%" size="small">
            <el-table-column type="index" label="序号" width="80"> </el-table-column>
            <el-table-column prop="name" label="用户名"> </el-table-column>
            <el-table-column prop="address" label="操作" align="center" width="120"> 
                <template slot-scope="scope">
                    <i class="el-icon-delete" @click="deleteHandler(scope.row.id)"></i>
                    <i class="el-icon-setting" @click="setHandler(scope.row)"></i>
                    <i class="el-icon-edit" @click="editHandler(scope.row)"></i>
                </template>
            </el-table-column>
        </el-table>

        <!-- 模态框 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="角色名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveHandler">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 授权模态框 -->
        <el-dialog title="授权" :visible.sync="setDialogVisible" width="50%">
            {{setForm}}
            <el-form ref="form" :model="setForm" label-width="80px">
                <el-form-item label="角色名称">
                    <div>{{role_row}}</div>
                </el-form-item>
                <el-form-item label="权限">
                    <el-cascader-panel v-model="setForm.privileges" :options="options" :props="props" clearable></el-cascader-panel>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveSetHandler">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import qs from 'qs'
export default {
    data() {
        return {
            roles:[],
            form: {},
            dialogVisible: false,
            title: "",
            setDialogVisible: false,
            setForm: {},
            role_row: '',
            props: { multiple: true ,children:'children',label:'name',value:'id'},
            options: ''
        }
    },
    created() {
        this.findAllRoles()
        // 查询所有权限
        this.findAllPrivilege()
    },
    methods: {
        // 授权
        setHandler(row) {
            row.privileges = row.privileges.map((item)=>{
                let arr = new Map()
                arr.set(item.parentId,item.id)
                return Array.from(arr)[0]
            })
            this.role_row = row.name
            this.setDialogVisible = true
            this.setForm = row
            this.setForm.id = row.id
        },

        // 确认授权
        saveSetHandler() {
            this.setDialogVisible = false
            this.setForm.privileges = this.setForm.privileges.map((item)=>{
                return item[1]
            }).toString()

            this.axios({
                method:"post",
                url:"http://39.96.21.48:8888/role/authorization",
                data: qs.stringify(this.setForm),
                headers: {
                    "X-Requested-With": "XMLHttpRequest",
                    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
                }
            }).then(res => {
                this.findAllRoles()
                this.findAllPrivilege()
            })
        },

        // 查询所有权限
        findAllPrivilege() {
            this.axios.get("/privilege/findPrivilegeTree").then(res => {
                console.log(res)
                // 调用递归方法，去除级联数据后将数据赋值给级联选择器
                this.options=this.getTreeData(res.data.data);
            }) 
        },

        // 递归方法
        getTreeData(data){
            // 循环遍历json数据
            for(var i=0;i<data.length;i++){ 
                if(data[i].children.length<1){
                    // children若为空数组，则将children设为undefined
                    data[i].children=undefined;
                }else {
                    // children若不为空数组，则继续 递归调用 本方法
                    this.getTreeData(data[i].children);
                }
            }
            return data;
        },

        // 移除
        deleteHandler(id) {
            this.axios.get("/role/deleteById",{params: {id}}).then(res => {
                
            })
        },

        // 添加
        addHandler() {
            this.dialogVisible = true;
            this.title = "新增角色"
        },

        // 保存
        saveHandler() {
            this.axios.post("/role/saveOrUpdate",qs.stringify(this.form)).then(res => {
                this.findAllRoles()
                this.dialogVisible = false
                this.$notify({
                    title: '成功',
                    message: res.data.message,
                    type: 'success'
                });
            })
        },

        // 修改
        editHandler(row) {
            this.form = row;
            this.title = "修改角色"
            this.dialogVisible = true
        },

        // 查询所有角色
        findAllRoles() {
            this.axios.get("/role/cascadePrivilegeFindAll").then(res => {
                this.roles = res.data.data
            })
        }
    }
}
</script>

<style scoped>
   i {
       margin-right: .5rem;
   }
</style>